<template>
    <div class="card-list">
    <div v-for="(item,index) in paperData" :key="index">
        <Data :title="item.title" :num="item.num"></Data>
    </div>
  </div>

  <div class="shaixuan">
    <div class="shaixuan-content">
        <el-input
              v-model="searchKeyword"
              placeholder="请输入搜索关键词"
              style="width:200px;"
              clearable
              :prefix-icon="Search"
            >
        </el-input>
        <el-date-picker
              v-model="dateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @clear="handleClear"
            />
            <el-button
              type="primary"
              @click="handleSearch"
            >
              <el-icon><Search /></el-icon>搜索
            </el-button>
    </div>
  </div>

  <div class="table">
    <el-table :data="tableData" border stripe>
        <el-table-column prop="paper_id" label="壁纸ID" width="100" />
              <el-table-column prop="paper_image" label="壁纸图片" width="80">
                <template #default="scope">
                  <img
                  v-if="scope.row.is_move==0||scope.row.paper_image.endsWith('.gif')"
                    :src="scope.row.paper_image"
                    class="paper"
                  />
                  <video class="paper" v-else autoplay muted loop :src="scope.row.paper_image"></video>
                </template>
        </el-table-column>
        <el-table-column prop="paper_title" label="壁纸标题" />
        <el-table-column prop="paper_createtime" label="发布时间" >
            <template #default="scope">
              <span>{{ formatTimestamp(scope.row.paper_createtime) }}</span>
            </template>
        </el-table-column>
        <el-table-column prop="paper_usecount" label="使用次数" />
        <el-table-column prop="is_delete" label="状态" >
            <template #default="scope">
              <span>{{ scope.row.is_delete==0?'正常':'封禁' }}</span>
            </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
                <template #default="scope">
                  <el-button
                    type="primary"
                    size="small"
                    @click="handleEdit(scope.row)"
                    >编辑</el-button
                  >
                  <el-button
                    type="info"
                    size="small"
                    @click="handleView(scope.row)"
                    >查看</el-button
                  >
                </template>
        </el-table-column>
    </el-table>
    <div class="pagination">
        <el-pagination
              v-model:current-page="PageNo"
              v-model:page-size="PageSize"
              :total="total"
              :page-sizes="[10, 20, 30, 50]"
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="handleSizeChange"
              @current-change="handlePageNoChange"
            />
    </div>
  </div>

  <el-dialog v-model="editshow" title="编辑" width="300px">
    <div class="edit-item">
        <span>壁纸标题:</span>
        <el-input style="width: 200px;" v-model="edit.paper_title"/>
    </div>
    <div class="edit-item">
        <span>壁纸描述:</span>
        <el-input type="textarea" style="width: 200px;" v-model="edit.paper_desc"/>
    </div>
    <div class="edit-item">
        <span>状态:</span>
        <el-select style="width: 200px;"
            v-model="edit.is_delete"
          >
            <el-option
              label="正常"
              :value="0"
            />
            <el-option
              label="封禁"
              :value="1"
            />
          </el-select>
    </div>
    <template #footer>
        <span>
          <el-button @click="editshow = false">取消</el-button>
          <el-button
            type="primary"
            @click="handleEditSubmit"
            >确定</el-button
          >
        </span>
      </template>
  </el-dialog>

  <el-dialog v-model="detailshow" title="详情" width="300px">
    <div class="detail-item">
        <span>壁纸ID:</span>
        <span>{{ detail.paper_id }}</span>
    </div>
    <div class="detail-item">
        <span>壁纸标题:</span>
        <span>{{ detail.paper_title }}</span>
    </div>
    <div class="detail-item">
        <span>壁纸图片:</span>
        <el-image v-if="detail.is_move==0||detail.paper_image.endsWith('.gif')" :zoom-rate="1.2" :max-scale="7" :min-scale="0.2" :preview-src-list="[detail.paper_image]" show-progress :initial-index="0" class="paper" :src="detail.paper_image"></el-image>
        <video ref="detailvideo" @click="detailvideo.requestFullscreen()" v-else autoplay muted loop :src="detail.paper_image" class="paper"></video>
    </div>
    <div class="detail-item">
        <span>壁纸标签:</span>
        <span>{{ detail.category_path }}</span>
    </div>
    <div class="detail-item">
        <span>发布时间:</span>
        <span>{{ formatTimestamp(detail.paper_createtime) }}</span>
    </div>
    <div class="detail-item">
        <span>壁纸描述:</span>
        <span>{{ detail.paper_desc }}</span>
    </div>
    <div class="detail-item">
        <span>使用次数:</span>
        <span>{{ detail.paper_usecount }}</span>
    </div>
    <div class="detail-item">
        <span>状态:</span>
        <span>{{ detail.is_delete==0?'正常':'封禁' }}</span>
    </div>
    <div class="detail-item">
        <span>壁纸发布者:</span>
        <span>{{ detail.user_nickname }}</span>
    </div>
  </el-dialog>
  </template>
  
  <script lang="ts" setup>
  import {ref,reactive,onBeforeMount,computed} from 'vue'
  import { Search,Plus} from '@element-plus/icons-vue'
  import { ElMessage } from 'element-plus'
  import Data from './Data.vue';
  import { GetPaperData,GetPaperList,UpdatePaper } from '@/service/api/paper';
  let paperData=reactive([
    {
        title:'壁纸总数',
        num:'0'
    },
    {
        title:'今日上传',
        num:'0'
    },
    {
        title:'总下载量',
        num:'0'
    },
    {
        title:'今日下载',
        num:'0'
    }
])
let PageNo=ref(1)
let PageSize=ref(10)
let total=ref(0)
let detailvideo=ref(null)
let edit=ref({})
let detail=ref({})
let editshow=ref(false)
let detailshow=ref(false)
let dateRange=ref([])
let tableData=ref([])
let searchKeyword=ref('')
onBeforeMount(()=>{
    getpaperdata()
    getpaperlist()
})

function handleEditSubmit(){
    UpdatePaper({
        paper_id:edit.value.paper_id,
        paper_title:edit.value.paper_title,
        paper_desc:edit.value.paper_desc,
        is_delete:edit.value.is_delete
    }).then(res=>{
        if(res.data.code==200){
            ElMessage.success('修改成功')
            tableData.value=[]
            PageNo.value=1
            getpaperlist()
            getpaperdata()
            editshow.value=false
        }
    })
}

function handleEdit(item){
    edit.value=JSON.parse(JSON.stringify(item))
    editshow.value=true
}

function handleView(item){
    detail.value=item
    detailshow.value=true
}
function getpaperlist(){
  GetPaperList({
    PageNo:PageNo.value,
    PageSize:PageSize.value,
    keywords:searchKeyword.value,
    starttime:dateRange.value[0]?new Date(dateRange.value[0]).getTime():null,
    endtime:dateRange.value[1]?new Date(dateRange.value[1]).getTime():null
  }).then(res=>{
    if(res.data.code==200){
        tableData.value=[...tableData.value,...res.data.data.papers]
        total.value=res.data.data.total
    }
  })
}
function handleSizeChange(value){
    tableData.value=[]
    PageSize.value=value
    getpaperlist()
}

function handlePageNoChange(value){
    tableData.value=[]
    PageNo.value=value
    getpaperlist()
}
function handleClear(){
    dateRange.value=[]
}
function handleSearch(){
    tableData.value=[]
    PageNo.value=1
    getpaperlist()
}
function getpaperdata(){
    GetPaperData().then(res=>{
        if(res.data.code==200){
            paperData[0].num=res.data.data.alltotal
            paperData[1].num=res.data.data.newtotal
            paperData[2].num=res.data.data.downloadtotal
            paperData[3].num=res.data.data.newdownloadtotal
       }
    })
}

function formatTimestamp(timestamp) {
  const date = new Date(timestamp)
  const year = date.getFullYear()
  const month = date.getMonth() + 1
  const day = date.getDate()
  const hours = date.getHours()
  const minutes = date.getMinutes()
  const formattedMonth = month < 10 ? '0' + month : month
  const formattedDay = day < 10 ? '0' + day : day
  const formattedHours = hours < 10 ? '0' + hours : hours
  const formattedMinutes = minutes < 10 ? '0' + minutes : minutes
 
  return `${year}-${formattedMonth}-${formattedDay} ${formattedHours}:${formattedMinutes}`
}

  </script>
  
  <style lang="scss" scoped>
@import url("@/assets/css/view.scss");
</style>
  